<template>
  <div class="reportManagement">
    <!-- 筛选条件 -->
    <ContentWrap>
      <el-form
        ref="queryFormRef"
        class="-mb-15px"
        :model="queryParams"
        :inline="false"
        label-width="130px"
      >
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="姓名" prop="patientName">
              <el-input v-model="queryParams.patientName" placeholder="请输入姓名" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="身份证号码" prop="idNumber">
              <el-input v-model="queryParams.idNumber" placeholder="请输入身份证号" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="上报状态" prop="reportStatus">
              <el-select
                v-model="queryParams.reportStatus"
                placeholder="请选择上报状态"
                clearable
              >
                <el-option
                  v-for="dict in getIntDictOptions(DICT_TYPE.REPORT_STATUS)"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="text-right">
            <el-form-item>
              <el-button
                type="primary"
                @click="handleQuery"
                v-hasPermi="['report:townReport:query']"
                >查询</el-button
              >
              <el-button @click="resetQuery">重置</el-button>
              <el-button
                type="primary"
                @click="handleAdd('action.add')"
                v-hasPermi="['report:townReport:create']"
              >
                上报人员
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </ContentWrap>
    <ContentWrap>
      <div class="content">
           <!-- 区域树 -->
        <div class="tree-box">
          <RegionTree v-model:checkedKeys="selectedKeys" :isExpand="true" :checkStrictly="false" />
        </div>
        <div style="width: 80%; height: calc(100vh - 265px)">
          <el-table
            size="large"
            v-loading="loading"
            :data="lists"
            border
            style="width: 100%"
            height="90%"
          >
            <!-- 序号 -->
            <el-table-column type="index" label="序号" width="80" align="center" fixed />
            <el-table-column
              label="姓名"
              prop="patientName"
              width="100"
              show-overflow-tooltip
              align="center"
            />
            <el-table-column label="性别" prop="gender" width="80" align="center">
              <template #default="scope">
                {{ getDictLabel(DICT_TYPE.GENDER, scope.row.gender) }}
              </template>
            </el-table-column>
            <el-table-column
              label="证件号"
              prop="idNumber"
              width="230"
              show-overflow-tooltip
              align="center"
            />
            <el-table-column
              label="住址"
              prop="address"
              width="260"
              show-overflow-tooltip
              align="center"
            />
            <el-table-column
              label="联系人"
              prop="contactPerson"
              width="100"
              show-overflow-tooltip
              align="center"
            />
            <el-table-column label="联系人电话" prop="contactPhone" width="137" align="center" />
            <el-table-column label="诊断状态" prop="diagnosisStatus" width="150" align="center">
              <template #default="scope">
                <el-tag v-if="scope.row.diagnosisStatus === '1'" type="danger">
                  {{ getDictLabel(DICT_TYPE.DIAGNOSIS_STATUS, scope.row.diagnosisStatus) }}
                </el-tag>
                <el-tag v-if="scope.row.diagnosisStatus === '2'" type="warning">
                  {{ getDictLabel(DICT_TYPE.DIAGNOSIS_STATUS, scope.row.diagnosisStatus) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="上报状态" prop="reportStatus" width="150" align="center">
              <template #default="scope">
                <el-tag v-if="scope.row.reportStatus === '1'" type="primary">
                  {{ getDictLabel(DICT_TYPE.REPORT_STATUS, scope.row.reportStatus) }}
                </el-tag>
                <el-tag v-if="scope.row.reportStatus === '2'" type="danger">
                  {{ getDictLabel(DICT_TYPE.REPORT_STATUS, scope.row.reportStatus) }}
                </el-tag>
                <el-tag v-if="scope.row.reportStatus === '3'" type="info">
                  {{ getDictLabel(DICT_TYPE.REPORT_STATUS, scope.row.reportStatus) }}
                </el-tag>
                <el-tag v-if="scope.row.reportStatus === '4'" type="success">
                  {{ getDictLabel(DICT_TYPE.REPORT_STATUS, scope.row.reportStatus) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="上报时间" prop="reportTime" width="150" align="center">
              <template #default="scope">
                {{ formatDate(scope.row.reportTime, 'YYYY-MM-DD') }}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="220" fixed="right" align="center">
              <template #default="scope">
                <el-button
                  v-hasPermi="['report:townReport:edit']"
                  :disabled="scope.row.reportStatus === '3' || scope.row.reportStatus === '1' || scope.row.reportStatus === '4'"
                  type="primary"
                  link
                  @click="handleEdit('action.edit', scope.row.id)"
                >
                  修改
                </el-button>
                <el-button
                  v-hasPermi="['report:townReport:details']"
                  type="primary"
                  link
                  @click="handleView(scope.row.id)"
                >
                  详情
                </el-button>
                <el-button
                  v-hasPermi="['report:townReport:revoke']"
                  type="danger"
                  :disabled="scope.row.reportStatus === '3' || scope.row.reportStatus === '4' || scope.row.diagnosisStatus === '2'"
                  link
                  @click="handleRevoke(scope.row)"
                >
                  {{
                    scope.row.reportStatus === '1'
                      ? '撤回'
                      : scope.row.reportStatus === '2'
                      ? '上报'
                      : '撤回'
                  }}
                </el-button>
                <el-button
                  v-hasPermi="['report:townReport:delete']"
                  :disabled="scope.row.reportStatus === '3' || scope.row.reportStatus === '1' || scope.row.reportStatus === '4'"
                  type="danger"
                  link
                  @click="handleDelete(scope.row.id)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <Pagination
            :total="total"
            v-model:page="queryParams.pageNo"
            v-model:limit="queryParams.pageSize"
            @pagination="getLists"
          />
        </div>
      </div>
    </ContentWrap>
    <ReportInfoDetail ref="reportInfoDetail" />
    <!-- 用户新增对话框 -->
    <ReportInfoAdd ref="reportInfoAdd" @success="getLists" />
  </div>
</template>

<script lang="ts" setup name="ReportManagement">
import * as townReportApi from '@/api/patient/reportManagement'
import { DICT_TYPE, getIntDictOptions, getDictLabel } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime'
import ReportInfoDetail from './components/reportInfoDetail.vue'
import ReportInfoAdd from './components/reportInfoAdd.vue'
const message = useMessage() // 消息弹窗
const queryParams = reactive({
  patientName: undefined,
  reportStatus:undefined,
  idNumber: undefined,
  orginDeptId: [],
  pageNo: 1,
  pageSize: 10
})
// 选中的节点 ID
const selectedKeys = ref<string[]>([])
const loading = ref(true) // 列表的加载中
const lists = ref<any[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryFormRef = ref() // 搜索的表单
/** 查询列表 */
const getLists = async () => {
  loading.value = true
  try {
    const data = await townReportApi.getReportPatient(queryParams)
    lists.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}
/** 查询按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getLists()
}

/** 重置按钮操作 */
const resetQuery = () => {
  //form表单重置
  queryFormRef.value?.resetFields()
  handleQuery()
}
/** 上报 */
const reportInfoAdd = ref()
const handleAdd = (type: string) => {
  reportInfoAdd.value.open(type, null)
}
const handleEdit = (type: string, id: string) => {
  reportInfoAdd.value.open(type, id)
}
const handleDelete = async (id: number) => {
    await message.delConfirm()
  await townReportApi.deletePatient(id)
  getLists()
}
const handleRevoke = async (row: any) => {
  let content = '确定要撤回？'
  if (row.reportStatus === '2') {
    content = '确定要上报？'
  }
  await message.delConfirm(content)
  const { idNumber, ...rest } = row
  if (row.reportStatus === '2') {
    await townReportApi.reportPatient({ ...rest })
  } else {
    await townReportApi.returnPatient({ ...rest })
  }
  getLists()
}
const reportInfoDetail = ref()
// 详情按钮操作
const handleView = (id: number) => {
  reportInfoDetail.value.open(id)
}

onMounted(() => {
  getLists()
})
// 监听勾选的值
watch(selectedKeys, (newCheckedKeys) => {
  queryParams.orginDeptId = newCheckedKeys // 更新queryParams中的值
  handleQuery()
})
</script>

<style lang="scss" scoped>
.text-right {
  display: flex;
  justify-content: flex-end;
}
.content {
  display: flex;
}
.tree-box {
  width: 330px;
  height: calc(100vh - 275px);
  overflow: auto;
  margin-right: 16px;
}
.upload-demo {
}
</style>
